<template>
    <div class="app">
        <member-component :groupId="groupId" @member-deleted="getGroupMembers()" />
        <header class="modify-header">
            <div class="left">
                <span class="arrow" @click="$router.back()"><i class="el-icon-arrow-left" />返回</span>
                <span>|</span>
                <span>小组成员</span>
            </div>
            <div class="right">
                课程管理系统
            </div>
        </header>
        <!-- <div>成员: <div style="background-color:rgb(255,255,0); width: 20px;height: 20px;"></div></div>
        <div>组长: <div style="background-color:rgb(202, 135, 215); width: 20px;height: 20px;"></div></div> -->
        <div class="role-introduced " style="display: flex; align-items: center;" >
            <div style="margin-left: 30px;">组长: <div style="background-color:#9999FF; width: 20px;height: 20px;"></div>
            </div>
            <div>成员: <div style="background-color:#C0C0C0; width: 20px;height: 20px;"></div>
            </div>
        </div>
        <div class="team-container">
            <!-- <member-component :groupId="groupId" @member-deleted="getGroupMembers()" /> -->
            <team-member v-for="member in teamMembers" :key="member.id" :member="member" :leader="leader"
                :courseId="courseId"></team-member>
            <div class="icon-container" v-if="teamMembers.length < 8" @click="addMemberHandle()" title="添加成员">
                <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
        </div>
        <!-- 新建，修改弹窗 -->
        <div>
            <el-dialog title="组长姓名" :visible.sync="dialogVisible">
                <div class="score-table-container">
                    <el-table :data="tableData" stripe class="data_table">
                        <el-table-column prop="studentId" label="学生编号">
                        </el-table-column>
                        <el-table-column prop="students.studentNumber" label="学生学号">
                        </el-table-column>
                        <el-table-column prop="students.className" label="班级名称">
                        </el-table-column>
                        <el-table-column prop="students.studentName" label="学生姓名">
                        </el-table-column>
                        <el-table-column label="操作" width="150px" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" class="blueBug"
                                    @click="addMember(scope.row.studentId)">
                                    添加成员
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
// 引入TeamMember组件  
import TeamMember from './TeamMember.vue';
import { getGroupMemberAPI, addMemberAPI } from "@/api/groupMember";
import { getCourseRecordsAPI } from '@/api/score'


export default {
    // name: 'App',
    components: {
        TeamMember
    },
    data() {
        return {
            groupId: '',
            leader: '',
            // 假设这是从服务器或某个数据源获取的团队成员数据  
            teamMembers: [],
            tableData: [],
            dialogVisible: false,
            courseId: ''
        };
    },
    mounted() {
        this.groupId = this.$route.query.groupId
        this.leader = this.$route.query.leader
        this.courseId = this.$route.query.courseId
        this.getGroupMembers()
    },
    methods: {
        //获取该组成员
        getGroupMembers() {
            // console.log(this.groupId);
            getGroupMemberAPI(this.groupId).then((res) => {
                this.teamMembers = res.data
            })
        },
        //学生成绩单
        //获取该课程所包含的所有成绩单
        async getCourseRecords() {
            getCourseRecordsAPI(this.courseId).then(res => {
                // console.log(res.data);
                this.tableData = res.data
            })
        },
        //添加成员按钮
        addMemberHandle() {
            this.getCourseRecords()
            //弹窗
            this.dialogVisible = true
        },
        //添加成员
        addMember(studentId) {
            //Query参数
            addMemberAPI(this.groupId, studentId).then((res) => {
                if (res.code === 200) {
                    if (res.data === 30006) {
                        this.$message.error('添加成员失败,该成员已加入此组')
                        this.dialogVisible = false
                        return false
                    } else if (res.data === 30011) {
                        this.$message.error('添加成员失败,该成员已加入其他组')
                        this.dialogVisible = false
                        return false
                    }
                    this.$message.success('添加成员成功')
                } else {
                    this.$message.error('添加成员失败')
                }
                this.dialogVisible = false
                this.getGroupMembers()
            }).catch(error => {
                this.$message.error(error)
            })
        }
    }
}  
</script>

<style>
/* 全局样式，如果需要的话 */
.app {
    font-family: Arial, sans-serif;
    /* display: flex; */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    flex-wrap: wrap;
    /* padding: 20px; */

    .modify-header {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        height: 64px;
        line-height: 64px;
        font-size: 16px;
        font-weight: bold;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }
}

.team-container {
    align-items: center;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

}

.team-member {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    width: calc(50% - 20px);
    /* 调整为适合两列的布局 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.icon-container {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    height: 100px;
    /* 或者任何你想要的固定高度 */
    width: 100px;
    /* 或者任何你想要的固定宽度 */
    border: 1px solid;
    border-radius: 10px;
}

.role-introduced {
    padding-left: 5%;
}

@media (max-width: 600px) {
    .team-member {
        width: 100%;
    }
}
</style>